<!--
	作者：itlangqun@sina.com
	时间：2016-05-22
	描述：
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Web缓存管理 MemAdmin4j</title>
		<!-- 基础lib-->
		<link rel="stylesheet" href="libs/typo.css/typo.css" />
		<link rel="stylesheet" href="css/layout.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="libs/comboSelect/css/combo.select.css" />
		<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="libs/comboSelect/js/jquery.combo.select.js" ></script>
		<!--[if lt IE 8]>
		<script type="text/javascript" src="libs/PIE-2.0beta1/PIE_IE678_uncompressed.js" ></script>
		<![endif]-->
		 <!--[if IE 9]>
		<script type="text/javascript" src="libs/PIE-2.0beta1/PIE_IE9_uncompressed.js" ></script>
		<![endif]-->
		
		<script type="text/javascript" src="libs/laycode-v1.1/laycode/laycode.js" ></script>
		<script>
			$(function(){
				$('.title-container .code').laycode({
					height: 'auto', //高度
				    title: '代码', //标题
				    skin: 0, //皮肤
				    by: true //是否显示组件名
				});
				
				//菜单初始化
				//$("#firstpane .menu_body:eq(0)").show();
				//$("#firstpane p.menu_head").click(function(){
				//	$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
				//	$(this).siblings().removeClass("current");
				//});
				//$("#secondpane .menu_body:eq(0)").show();
				//$("#secondpane p.menu_head").mouseover(function(){
				//	$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
				//	$(this).siblings().removeClass("current");
				//});
				
				//下拉单选框初始化
				$('select').comboSelect();
				
				//计算屏幕高度与自适应高度设计
				resizeHeight();
				$(window).resize(function(){
					resizeHeight();
				});
			});
			
			function resizeHeight(){
				var windowHeight = $(window).height();
				var height = windowHeight-100-28;
				$("#menuList").height(height);
				$("#mainContent").height(height);
			}
		</script>
	</head>
	
	<body>
		
		<div class="container">
			<!--left modular-->
			<div class="container-left-modular">
				<!--logo area -->
				<div class="header">
					 <div class="logo-container">
					 	 <img class="logo" src="img/logo/memcached.gif"/>
					 </div>
					 <div class="title-container">
					 	<h1>WEB缓存管理</h1>
					 	<h3 class="system">MemAdmin4j</h3>
					 	<h4 class="ver"><span class="btns">v0.0.1</span></h4>
					 </div>
				</div>
				<div class="line"></div>
				<!--logo area end -->
				
				<div class="nav">
					系统功能菜单
				</div>
				
				<div class="menu">
					<div id="menuList" class="menu_list">
						    <p class="menu_head current">缓存监控台</p>
						    <div style="" class=menu_body >
						      <a href="#">监控总览</a>
						      <a href="#">参数设置</a>
						    </div>
						    <p class="menu_head current">性能指标监控</p>
						    <div style="" class=menu_body >
						      <a href="#">基本信息</a>
						      <a href="#">实时监控</a>
						      <a href="#">数据统计</a>
						    </div>
						    <p class="menu_head current">数据查询与维护</p>
						    <div style="" class=menu_body >
						      <a href="#">区块查询</a>
						      <a href="#">数据维护</a>
						    </div>
						    <p class="menu_head current">命中率统计</p>
						    <div style="" class=menu_body >
						      <a href="#">命中率统计</a>
						    </div>
						    <p class="menu_head current">业务定制模块</p>
						    <div style="" class=menu_body >
						      <a href="#">重置系统缓存</a>
						      <a href="#">清理业务缓存</a>
						    </div>
						</div>
				</div>
				
				<div class="copyright">
					Copyright© 2016 雪浪
				</div>
				
			</div>
			<!--left modular end-->
			
			<!--right modular-->
			<div class="container-right-modular">
				<!--head-->
				<div class="head">
					   <div class="head-top">
					   	     <span class="head-top-title">缓存连接设置：</span>
					   	     <div class="server-list">
								<select>
									<option value="">===请选择连接服务器===</option>
									<option value="一月">192.168.1.110:11211</option>
									<option value="二月">192.168.1.111:11211</option>
									<option value="二月">192.168.1.112:11211</option>
									<option value="二月">192.168.1.113:11211</option>
									<option value="二月">192.168.1.114:11211</option>
									<option value="二月">192.168.1.115:11211</option>
								</select>
							</div>
							<div class="link-list">
								 <ul>
								 	<li><a href="#">Memcache学习中心</a></li>
								 	<li><a href="#">使用帮助</a></li>
								 </ul>
							</div>
					   </div>
					   
					   <div class="head-bottom">
					   	      <div class="current-server">
					   	      		<label class=" label">当前默认连接：</label>
					   	      		<label class="select">192.168.1.112:11211</label>
					   	      </div>
					   	      <div class="top-message">
					   	      	    当前无服务器无法连通,请检测故障!
					   	      </div>
					   </div>
					   
					   <div class="line"></div>
				</div>
				<!--head end-->
				
				<!--main nav-->
				<div class="main-nav">
					  当前位置: 缓存监控台 >> 监控总览
				</div>
				<!--main nav end-->
				
				<!--main content-->
				<div id="mainContent" class="main-content">
					  
					  <div class="monitor">
							<div class="cacheSelection">
						    	<div class="mon_tit">
						        	<strong>重置缓存选择</strong>&nbsp;&nbsp;
						            <span>全方位监控视图为您的应用保驾护航</span>
						        </div>
						        <div class="mon_icos">
						        	<div class="yonghu">
						            	<a href="#"></a>
						                <p><strong>重置用户缓存</strong></p>
						            </div>
						            <div class="zuzhi">
						            	<a href="#"></a>
						                <p><strong>重置组织缓存</strong></p>
						            </div>
						            <div class="zidian">
						            	<a href="#"></a>
						                <p><strong>重置字典缓存</strong></p>
						            </div>
						            <div class="suoyin">
						            	<a href="#"></a>
						                <p><strong>重置索引缓存</strong></p>
						            </div>
						            <div class="xitong">
						            	<a href="#"></a>
						                <p><strong>重置系统缓存</strong></p>
						            </div>
						            <div class="yewu">
						            	<a href="#"></a>
						                <p><strong>重置业务缓存</strong></p>
						            </div>
						        </div>
						    </div>
						    <div class="w49">
						        <div style="border:1px solid #ddd;">
						            <div class="mon_tit">
						                <strong>查询是否存在Key</strong>&nbsp;&nbsp;
						                <span>全方位监控视图为您的应用保驾护航</span>
						            </div>
						            <div class="w_inner">
						            	<div class="p">
						                	<input type="text" value="  缓存Key" class="wn_text" />
						                    <input type="button" value="执行查询" class="wn_btn01" />
						                </div>
						                <div class="p"><strong>检查结果：</strong></div>
						                <div class="p"><strong class="colorf9">感谢您的耐心等待，查询结果：【Key:ServiceType】在缓存中存在！</strong></div>
						            </div>
						        </div>
						    </div>
						    <div class="w49" style="margin-right:0">
						    	<div style="border:1px solid #ddd;">
						            <div class="mon_tit">
						                <strong>查询Key对应的数据</strong>&nbsp;&nbsp;
						                <span>全方位监控视图为您的应用保驾护航</span>
						            </div>
						            <div class="w_inner">
						            	<div class="p">
						                	<input type="text" value="  缓存Key" class="wn_text" />
						                    <input type="button" value="执行查询" class="wn_btn01" />
						                </div>
						                <div class="p"><strong>检查结果：</strong></div>
						                <div class="p"><strong class="colorf9">感谢您的耐心等待，查询结果：【Key:ServiceType】在缓存中存在！</strong></div>
						            </div>
						        </div>
						    </div>
						    <div class="w49">
						    	<div style="border:1px solid #ddd;">
						            <div class="mon_tit">
						                <strong>专项：系统字典数据查询</strong>&nbsp;&nbsp;
						                <span>全方位监控视图为您的应用保驾护航</span>
						            </div>
						            <div class="w_inner">
						            	<div class="p">
						                    <div class="w80">
						                    	<div class="h36">
						                            <div class="icoXxing"></div>
						                            <select class="wn_select">
						                                <option>  客户类型</option>
						                            </select>
						                        </div>
						                        <br />
						                        <div class="h36">
						                        <input type="text" value="  缓存Key" class="wn_text" />
						                        </div>
						                    </div>
						                    <input type="button" value="执行查询" class="wn_btn02" />
						                </div>
						                <div class="p"><strong>检查结果：</strong></div>
						                <div class="p"><strong class="colorf9">感谢您的耐心等待，查询结果：【Key:ServiceType】在缓存中存在！</strong></div>
						            </div>
						        </div>
						    </div>
						    <div class="w49" style="margin-right:0">
						    	<div style="border:1px solid #ddd;">
						            <div class="mon_tit">
						                <strong>专项：业务字典数据查询</strong>&nbsp;&nbsp;
						                <span>全方位监控视图为您的应用保驾护航</span>
						            </div>
						            <div class="w_inner">
						            	<div class="p">
						                    <div class="w80">
						                        <div class="h36">
						                            <div class="icoXxing"></div>
						                            <select class="wn_select">
						                                <option>  请选择数据库表名</option>
						                            </select>
						                        </div>
						                        <br />
						                        <div class="h36">
						                            <div class="icoXxing"></div>
						                            <input type="text" value="  缓存Key" class="wn_text" />
						                        </div>
						                    </div>
						                    <input type="button" value="执行查询" class="wn_btn03" />
						                </div>
						                <div class="p"><strong>检查结果：</strong></div>
						                <div class="p"><strong class="colorf9">感谢您的耐心等待，查询结果：【Key:ServiceType】在缓存中存在！</strong></div>
						            </div>
						        </div>
						    </div>
						</div>
					  
					  
				</div>
				<!--main content end-->
				
				<!--bottom msg-->
				<div class="bottom-msg">
				      <strong>操作提示: </strong> 每天高峰期请勿清空缓存以免造成"雪崩"
				</div>
				<!--bottom msg end-->	
			</div>
			<!--right modular end-->
		</div>
		
		<div class="line"></div>
	</body>
</html>
